<template>
  <div>
    <div class="legend g-legend-wrapper">
            <span class="g-legend-title g-font-f4">
              <span class="g-font-f5">{{currentTime}}</span>
            </span>
      <div class="g-legend-content">
              <span class="g-font-f5 g-legend-item">解禁市值
                <span class="number" style="color: #ff8420">{{amount}}</span>亿元
              </span>
      </div>
    </div>
    <div ref='pre-week-chart' style="height: 2.4rem"></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts';
  import constant from '@/common/constant'
  const chartConfig = constant.chartConfig;
  export default{
    name: 'pre-week',
    data() {
      return {
        amount: 0,
        currentTime: '今日'
      }
    },
    props: {
      chartData: {}
    },
    methods: {
      chartSelected(params) {
        let index = params[0].dataIndex;
        this.currentTime = params[0].axisValue
        Object.assign(this.$data, {
          amount: this.chartData.amount[index]
        });
      },
      redraw() {
        let options = {
          color: ['#ff8420'],
          tooltip: {
            formatter: this.chartSelected,
            ...chartConfig.tooltip
          },
          xAxis: {
            type: 'category',
            data: this.chartData.xTime,
            axisTick: chartConfig.axisTick,
            axisLine: chartConfig.axisLine,
            axisLabel: {
              ...chartConfig.axisLabel,
              interval: 0
            }
          },
          yAxis: {
            name: '解禁市值(亿元)',
            nameTextStyle: chartConfig.nameTextStyle,
            type: 'value',
            min: 70,
            axisTick: chartConfig.axisTick,
            axisLine: chartConfig.axisLine1,
            axisLabel: chartConfig.axisLabel,
            splitLine: chartConfig.splitLine
          },
          series: {
            name: `解禁市值`,
            data: this.chartData.amount,
            type: 'bar',
            barWidth: '60%',
            itemStyle: chartConfig.itemStyle
          },
          grid: {
            top: '15%',
            left: '9%',
            right: '10%',
            bottom: '5%',
            containLabel: true
          }
        };
        this.myChart.setOption(options);
        this.$store.dispatch('ctrlLoading', false);
      },
      legendInit () {
        this.amount = this.chartData.amount[0]
      }
    },
    mounted () {
      this.$store.dispatch('showLoading');
      this.myChart = echarts.init(this.$refs['pre-week-chart']);
    },
    watch: {
      chartData: function () {
        this.legendInit();
        this.redraw();
      }
    },
    beforeDestroy () {
      echarts.dispose(this.myChart);
    }
  }
</script>
<style lang="less" scoped>
  .g-legend-title{
    width: 20%;
    text-align: left;
  }
  .g-legend-content{
    justify-content: flex-end;
    padding-right: .4rem;
    .number{
      display: inline-block;
      width: .22rem;
      text-align: center;
    }
  }
</style>
